<template>
  <div class="werapp">
    <img src="../assets/lianx/login.a4c656a9.png" alt="" />
    <div class="box">
      <van-form @submit="onSubmit">
        <div v-if="!show" class="box-item">
          <van-field
            v-model="prams.mobile"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="prams.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div class="others">
            <span>找回密码</span>
            <span @click="show = true">注册/验证码登录</span>
          </div>
          <div style="margin: 16px; padding-top: 100px">
            <van-button
              round
              block
              type="info"
              native-type="submit"
              @click="addlogin"
              >提交</van-button
            >
          </div>
        </div>
        <div v-if="show">
          <van-field
            v-model="prams1.mobile"
            center
            clearable
            placeholder="请输入手机号"
          >
            <template #button>
              <van-button size="small" @click="push">{{ value }}</van-button>
            </template>
          </van-field>
          <van-field
            v-model="prams1.sms_code"
            type="text"
            name="验证码"
            placeholder="请输入短信验证码"
            :rules="[{ required: true, message: '请输入短信验证码' }]"
          />
          <div class="others">
            <span>*未注册的手机号将自动注册</span>
            <span @click="show = false">使用密码登录</span>
          </div>
          <div style="margin: 16px; padding-top: 100px">
            <van-button
              round
              block
              type="info"
              native-type="submit"
              @click="addlogin1"
              >提交</van-button
            >
          </div>
        </div>
      </van-form>
      <div class="box1" v-if="!show">
        <span>第三方登录</span>
        <div>
          <div class="wxLogin">
            <span class="icon iconfont" style="color: green">&#xe665;</span
            >微信登录
          </div>
          <div class="wxLogin">
            <span class="icon iconfont" style="color: skyblue">&#xe65e;</span
            >QQ登录
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { login, smsCode } from "../request/http";
import { Toast } from "vant";
export default {
  data() {
    return {
      show: false,
      prams: {
        mobile: "18511904833",
        password: "111111",
        type: 1,
      },
      prams1: {
        mobile: "",
        sms_code: "",
        type: 2,
        sms_type: "login",
      },
      value: "发送验证码",
      time: null,
    };
  },
  methods: {
    push() {
      smsCode(this.prams1).then((res) => {
        console.log(res);
        let num = 60;
        this.time = setInterval(() => {
          // debugger;
          num--;
          this.value = num + "s后重新发送";
          if (num <= 0) {
            clearInterval(this.time);
            this.value = "发送验证码";
            num = 60;
          }
        }, 1000);
        if (res.code == 200) {
          Toast.success("发送成功");
        }
      });
    },
    addlogin1() {
      login({
        mobile: this.prams1.mobile,
        sms_code: this.prams1.sms_code,
        type:this.prams1.type,
        guard:0,
      })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            Toast.success("注册成功");
            this.$router.push("/password")
          } else {
            Toast.fail(res.msg);
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    addlogin() {
      login(this.prams).then((res) => {
        console.log(res);
        if (res.code == 200) {
          localStorage.setItem("login", res.data.remember_token);
          Toast.success("登录成功");
          this.$router.push("/mine");
        } else {
          Toast.fail("登录失败");
        }
      });
    },
    onSubmit() {},
  },
};
</script>

<style lang="scss" scoped>
.werapp {
  text-align: center;
  margin-top: 100px;
}
.box {
  width: 83%;
  margin: 0 auto;
  .others {
    display: flex;
    justify-content: space-between;
    margin: 10px 30px;
    span {
      font-size: 0.347rem;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: #999;
    }
  }
  .box1 {
    width: 95%;
    margin: 0.533rem auto;
    text-align: center;
    div {
      display: flex;
      margin-top: 0.8rem;
      align-items: center;
      justify-content: center;
      .wxLogin {
        width: 50%;
        display: flex;
        justify-content: center;
        align-content: center;
        font-size: 0.347rem;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #999;
        span {
          margin-right: 20px;
        }
      }
    }
  }
}
</style>